{include file="common/head"/}
<style>
   
    #mark .box .close{
        position: absolute;
        top: 10px;
        right: 10px;
        background: url('/mobile/images/guanbeihei.svg') no-repeat center/20px;
        
        width: 20px;
        height: 20px;
    }
   
    .gobile_box .left{
        position: absolute;
        top: 30%;
        width: 30px;
        height: 30px;
        z-index: 1;
        cursor: pointer;
        left: 0;
        background: url('/mobile/images/zuo.svg') no-repeat center/20px;
    }
    .gobile_box .right{
        position: absolute;
        top: 30%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 1;
        right: 0;
        background: url('/mobile/images/you.svg') no-repeat center/20px;
    }
   
</style>
<div id="dusk"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>过夜房</legend>
</fieldset>
{volist name='list' id='vo' key="index"}
{if $vo.one_cate == 0}

<div>
    

<fieldset class="layui-elem-field layui-field-title ssetrt" style="margin-top: 0px;">
     <span>{$vo.title}</span>  <span>-</span>  <span>{$vo.is_activity == 0?'普通房':'活动房'}</span>
    <!--<a href="{:url('room/priceedit',['id'=>$vo.id])}" class="layui-btn">批量修改</a>-->
</fieldset>
<ul class="flow-default seev"  style="width: 1190px;">
    <div class="layui-clear seev1">
        <li class="mydate xqri"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期日</li>
    <li class="mydate xqyi"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期一</li>
    <li class="mydate xqer"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期二</li>
    <li class="mydate xqsan"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期三</li>
    <li class="mydate xqsi"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期四</li>
    <li class="mydate xqwu"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期五</li>
    <li class="mydate xqliu"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期六</li>
    </div>
    <div class="gobile_box">
        <div class="left" list_id="ge_demo{$vo.id}"></div>
        <div class="right" list_id="ge_demo{$vo.id}"></div>
        <ul class="flow-default layui-clear sliter" id="ge_demo{$vo.id}" snum="0" mnum="1" price_id="{$vo.id}" style="margin-left: 0;">
           
        </ul>
    </div>
</ul>
<div class="clear"></div>
</div>
{/if}
{/volist}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>钟点房</legend>
</fieldset>
{volist name='list' id='vo' key="index"}
{if $vo.one_cate == 1}
<fieldset class="layui-elem-field layui-field-title ssetrt" style="margin-top: 0px;">
    <span>{$vo.title}</span>  <span>-</span>  <span>{$vo.is_activity == 0?'普通房':'活动房'}</span>
    <!--<a href="{:url('room/priceedit',['id'=>$vo.id])}" class="layui-btn">批量修改</a>-->
</fieldset>
<ul class="flow-default seev" style="width: 1190px;">
    <div class="layui-clear seev1" >
        <li class="mydate xqri"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期日</li>
    <li class="mydate xqyi"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期一</li>
    <li class="mydate xqer"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期二</li>
    <li class="mydate xqsan"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期三</li>
    <li class="mydate xqsi"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期四</li>
    <li class="mydate xqwu"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期五</li>
    <li class="mydate xqliu"
        style="width: 170px;float: left;box-sizing: border-box;border: 1px solid #dadada;height: 30px;line-height: 30px;text-align: center;font-size: 16px;">
        星期六</li>
    </div>
    <div class="gobile_box">
        <div class="left" list_id="ge_demo{$vo.id}"></div>
            <div class="right" list_id="ge_demo{$vo.id}"></div>
        <ul class="flow-default layui-clear sliter" id="ge_demo{$vo.id}" price_id="{$vo.id}" snum="0" mnum="1" style="margin-left: 0;">
        </ul>
    </div>
</ul>
{/if}
{/volist}
{include file="common/foot"/}
<script>
    layui.use(['flow', 'layer'], function () {
        var flow = layui.flow;
        var layer = layui.layer;

        $('.left').click(function(){
            let el = $(this).attr('list_id')
            let snum = $(`#${el}`).attr('snum')
            if(snum != 0){
                snum--
                $(`#${el}`).attr('snum',snum)
                $(`#${el}`).stop().animate({left:`-${1190*snum}px`},1000)
            }
        })
        $('.right').click(function(){
            let el = $(this).attr('list_id')
            let snum = $(`#${el}`).attr('snum')*1
            let mnum = $(`#${el}`).attr('mnum')*1
            let id = $(`#${el}`).attr('price_id')
            if(snum+1 < mnum){
                snum++
                $(`#${el}`).attr('snum',snum)
                $(`#${el}`).stop().animate({left:`-${1190*snum}px`},1000)
            }else{
                snum++
                mnum++
                $.ajax({
                    url: '{:url("room/price")}',
                    type: 'post',
                    data: { page:mnum, id },
                    success: res => {
                        const { data, pages } = res
                        if(data.length == 0){
                            return false;
                        }
                        var lis = $(`#${el}`).html();
                        for (var i = 0; i < data.length; i++) {
                            let date = '{:date(date("Y-m-d"))}'
                            let timer = new Date(date)/1000
                            let new_timer = new Date(data[i].date)/1000
                            lis+=`<li style="width: 170px;height:232.2px;float: left;box-sizing: border-box;border: 1px solid #dadada;text-align: center;font-size: 16px;padding:0px 0 20px; ">
                                    <div class="shijian">${data[i].date}</div>
                                    <div class="vderr">
                                        <div class="yzfjs"><span>已定：</span>${data[i].use_num}</div> 
                                        <div class="sysl"><span>剩余：</span><input type="text" class="num_box" price_id="${data[i].id}" autocomplete="off" placeholder="请输入房间数量" value="${data[i].num===-1?'无限量':data[i].num}" ></div> 
                                        <div class="clear"></div> 
                                    </div>
                                    <div class="fjjg">
                                        <span>¥：</span>
                                        <input type="text" class="price_box" value="${data[i].price}" price_id="${data[i].id}" >
                                    </div>
                                    <div class="layui-input-block zhuangt" style="margin-left:0;line-height:36px">
                                             <label>
                                            <input type="radio" name="status${data[i].id}" value="0" class="status_box" price_id="${data[i].id}" title="正常" ${data[i].status==0?'checked=""':''}>正常
                                            </label>
                                            <label>
                                            <input type="radio" name="status${data[i].id}" value="1" class="status_box" price_id="${data[i].id}" title="下架" ${data[i].status==1?'checked=""':''}>下架
                                            </label>
                                    </div>
                                    <button type="button" class="layui-btn xiugai layui-btn-sm layui-btn-normal ${new_timer >= timer?'js_edit':''}  ${new_timer < timer?'layui-btn-disabled':''}" price_id="${data[i].room_id}" style="width:62px">修改</button>
                                    <button type="button" class="layui-btn queding layui-btn-sm layui-btn-normal ${new_timer >= timer?'js_update':''}  ${new_timer < timer?'layui-btn-disabled':''}" price_id="${data[i].id}" style="width:62px;">确认</button>
                                    </li>`
                        }
                        $(`#${el}`).html(lis)
                        $(`#${el}`).attr('mnum',mnum)
                        $(`#${el}`).attr('snum',snum)
                        $(`#${el}`).css({'width':`${1190*mnum}px`})
                        console.log(1)
                        $(`#${el}`).stop().animate({left:`-${1190*snum}px`},1000)
                        console.log(2)
                        $('.js_update').click(function () {
                            let id = $(this).attr('price_id')
                            let num = $(`.num_box[price_id="${id}"]`).val()
                            let price = $(`.price_box[price_id="${id}"]`).val()
                            let status = $(`.status_box[name="status${id}"]:checked`).val()
                            $.ajax({
                                url: '{:url("room/priceupdate")}',
                                type: 'post',
                                data: { id, num, price, status },
                                success: res => {
                                    if (res.code == 200) {
                                        layer.msg(res.msg, { icon: 1, time: 1000 });
                                    } else {
                                        layer.msg(res.msg, { icon: 2, time: 1000 });
                                    }
                                }
                            })
                        })
                        $('.js_edit').click(function () {
                            let id = $(this).attr('price_id')
                            const text = `
                                <div id="mark">
                                    <div class="box">
                                        <div class="close"></div>
                                        <iframe src="/admin/room/priceedit/id/${id}.html" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </div>
                            `
                            $('#dusk').html(text)
                            $('#dusk .close').click(function(){
                                $('#dusk').html('')
                            })
                        })
                        
                    }
                })
            }
        })
        {volist name = 'list' id = 'vo' key = "index" }
        let gy{$vo.id} = flow.load({
            elem: '#ge_demo{$vo.id}' //流加载容器
            , scrollElem: '#ge_demo{$vo.id}' //滚动条所在元素，一般不用填，此处只是演示需要。
            , done: function (page, next) { //执行下一页的回调
                $.ajax({
                    url: '{:url("room/price")}',
                    type: 'post',
                    data: { page, id: '{$vo.id}' },
                    success: res => {
                        const { data, pages } = res
                        var lis = [];
                        for (var i = 0; i < data.length; i++) {
                            let date = '{:date(date("Y-m-d"))}'
                            let timer = new Date(date)/1000
                            let new_timer = new Date(data[i].date)/1000
                            lis.push(`<li style="width: 170px;height:232.2px;float: left;box-sizing: border-box;border: 1px solid #dadada;text-align: center;font-size: 16px;padding:0px 0 20px; ">
                                    <div class="shijian">${data[i].date}</div>
                                    <div class="vderr">
                                        <div class="yzfjs"><span>已定：</span>${data[i].use_num}</div> 
                                        <div class="sysl"><span>剩余：</span><input type="text" class="num_box" price_id="${data[i].id}" autocomplete="off" placeholder="请输入房间数量" value="${data[i].num===-1?'无限量':data[i].num}" ></div> 
                                        <div class="clear"></div> 
                                     
                                    </div>
                                   <div class="fjjg">
                                        <span>¥：</span>
                                        <input type="text" class="price_box" value="${data[i].price}" price_id="${data[i].id}" >
                                    </div>
                                    <div class="layui-input-block zhuangt" style="margin-left:0;line-height:36px">
                                             <label>
                                            <input type="radio" name="status${data[i].id}" value="0" class="status_box" price_id="${data[i].id}" title="正常" ${data[i].status==0?'checked=""':''}>正常
                                             </label>
                                            <label>
                                            <input type="radio" name="status${data[i].id}" value="1" class="status_box" price_id="${data[i].id}" title="下架" ${data[i].status==1?'checked=""':''}>下架
                                             </label>
                                    </div>
                                    <button type="button" class="layui-btn xiugai layui-btn-sm layui-btn-normal ${new_timer >= timer?'js_edit':''}  ${new_timer < timer?'layui-btn-disabled':''}" price_id="${data[i].room_id}" >修改</button>
                                    <button type="button" class="layui-btn queding layui-btn-sm layui-btn-normal ${new_timer >= timer?'js_update':''}  ${new_timer < timer?'layui-btn-disabled':''}" price_id="${data[i].id}" >确认</button>
                                    </li>`)
                        }
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < pages); //假设总页数为 10
                        $('.js_update').click(function () {
                            let id = $(this).attr('price_id')
                            let num = $(`.num_box[price_id="${id}"]`).val()
                            let price = $(`.price_box[price_id="${id}"]`).val()
                            let status = $(`.status_box[name="status${id}"]:checked`).val()
                            $.ajax({
                                url: '{:url("room/priceupdate")}',
                                type: 'post',
                                data: { id, num, price, status },
                                success: res => {
                                    if (res.code == 200) {
                                        layer.msg(res.msg, { icon: 1, time: 1000 });
                                    } else {
                                        layer.msg(res.msg, { icon: 2, time: 1000 });
                                    }
                                }
                            })
                        })
                        $('.js_edit').click(function () {
                            let id = $(this).attr('price_id')
                            const text = `
                                <div id="mark">
                                    <div class="box">
                                        <div class="close"></div>
                                        <iframe src="/admin/room/priceedit/id/${id}.html" frameborder="0" width="100%" height="100%"></iframe>
                                    </div>
                                </div>
                            `
                            $('#dusk').html(text)
                            $('#dusk .close').click(function(){
                                $('#dusk').html('')
                            })
                        })
                    }
                })
            }
        });
        {/volist}
    })


    function closeinframe(){
        $('#dusk').html('')
        location.href = location.href
    }
</script>